import Taro, {Component} from "@tarojs/taro";
import {View,Image} from "@tarojs/components";
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime,phoneNumPartOf} from '../../utils/common'

import './index.less'
import './setting.less'

import right from "../../assets/img/right.png";

// 设置
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer

class Index extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    userInfo: {},
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'设置' })
    let userInfo = getRuntime().getUserInfo()
    if(userInfo){
      this.setState({
        userInfo
      })
    }
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  // 退出登录
  logout() {
    let { userStore } = this.props.stores
    userStore.logout({
      callback: () => {
        Taro.removeStorageSync('user')
        getRuntime().showToast('退出登录成功~')
        setTimeout(() => {
           getRuntime().navigateTo('/pages/index/index')
        },1000)
      }
    })
  }

  render() {
    let { userInfo } = this.state
    return (
      <View className='my-my setting'>
        <View className='wrap-box my-from'>
          <View className='item-group'>
            <View className='line' onClick={this.handelRouter.bind(this,'/pages/user/user_info_edit')}>
              <View className='list-title'>个人资料</View>
              <View className='list-desc'>
                <Image src={right} className='img icon-drop-down'/>
              </View>
            </View>

            <View className='line' onClick={this.handelRouter.bind(this, '/pages/user/address')}>
              <View className='list-title'>收货地址</View>
              <View className='list-desc'>
                <Image src={right} className='img icon-drop-down'/>
              </View>
            </View>
          </View>
        </View>

        <View className='wrap-box my-from'>

          <View className='item-group'>
            {/*<View className='line' onClick={this.handelRouter.bind(this, '/pages/user/set_phone')}>*/}
            <View className='line'>
              <View className='list-title'>手机号</View>
              <View className='list-desc'>{phoneNumPartOf(userInfo.phoneNumber)}
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>

            <View className='line' onClick={this.handelRouter.bind(this, '/pages/user/set_password')}>
              <View className='list-title'>密码修改</View>
              <View className='list-desc'>
                <Image src={right} className='img icon-drop-down'/>
              </View>
            </View>
          </View>

          <View className='item-group'>
            <View className='line' onClick={this.handelRouter.bind(this, '/pages/user/about')}>
              <View className='list-title'>关于我们</View>
              <View className='list-desc'>查看
                <Image src={right} className='img icon-drop-down' />
              </View>
            </View>
          </View>

          <View className='item-group' >
            <View className='line'>
              <View className='list-title color-light' onClick={this.logout.bind(this)}>退出登录</View>
            </View>
          </View>
        </View>

      </View>
    )
  }
}

export default Index
